/*
 * @Description: 化妆品商品详情
 * @Author: kanglin
 * @Date: 2018-09-19 10:24:24
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@deep: ~'>>>';
    .v-com-product-detail{
        position: relative;
        width: 1160px;
        padding: 4px 4px 0 4px;
        .image{
            display: inline-block;
            width:400px;
            height:400px;
            border:1px solid #EFEFEF;
            opacity:1;
            background-position: center;
            background-size: cover;
        }
        .info{
			position: relative;
            display: inline-block;
            margin-left: 40px;
			vertical-align: top;
			height: 400px;
        }

        .info__title{
            font-size:18px;
            line-height:32px;
            color:#333333;
			margin-top: 10px;
			width: 664px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
        }
        .info__desc {
            height:16px;
            font-size:12px;
            font-weight:400;
            line-height:16px;
            color:#333333;
            margin-top: 10px;
        }

        .info__color{
            height: 46px;
            margin-top: 40px;
        }
        .info__color__label{
            display: inline-block;
            // width:48px;
            font-size:16px;
            font-weight:400;
            color:#333333;
            line-height: normal;
        }
        .info__color__label__wrap{
            padding: 0 15px;
            display: inline-block;
            background:rgba(255,255,255,1);
            border:1px solid #E5E5E5;
            border-radius:5px;
        }
        .info__color__label__wrap__icon{
            display: inline-block;
            width: 30px;
            height: 30px;
			margin-top: -4px;
			vertical-align: middle;
			line-height: 44px;
			font-size: 0;
			background:#ffffff;
			border-radius:8px;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
			}
        }
        .info__color__label__wrap__name{
            line-height: 44px;
            font-size:14px;
            font-weight:400;
            margin-left: 10px;
            color:#333333;
        }

        .info__code{
            margin-top: 10px;
            height:19px;
            font-size:14px;
            font-weight:400;
            line-height:19px;
            color:#999999;
        }
        .info__price{
            margin-top: 40px;
            vertical-align: baseline;
            height:32px;
            font-size:16px;
            font-weight:400;
            line-height:32px;
            color:#333333;
            &>b{
				font-size:24px;
				font-weight:400;
            }
        }
        .info__count-and-btn {
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.info__count{
				height:24px;
				font-size:18px;
				font-weight:400;
				line-height:24px;
				color:#333333;
			}
			.info__add{
				.detail-btn {
					width:180px;
					height:45px;
					line-height: 45px;
					text-align: center;
					color: #fff;
					font-size: 18px;
					background:rgba(45,140,240,1);
					border-radius:23px;
					opacity:1;
					cursor: pointer;
				}
			}
		}

		.brand-form {
			padding-top: 40px;
			@{deep} .ivu-form-item{
				margin-right: 60px;
			}
			@{deep} .series{
				margin-right: 10px;
			}
			// background: red;
			@{deep} .ivu-form-item-label{
				text-align: left;
			}
			@{deep} .ivu-select-selection{
				width: 150px;
			}
			@{deep} .ivu-icon-help-circled{
				line-height: 32px;
			}
		}
    }
</style>

<template>
	<div class="v-com-product-detail">
		<div
			:style="getImageStyle"
			class="image"/>
		<div class="info">
			<h3
				:title="getTitle"
				class="info__title">
				{{ getTitle }}
			</h3>

			<small class="info__desc">
				{{ getSubtitle }}
			</small>

			<div class="info__color">
				<div class="info__color__label">{{ $t('share_product.color_num') + $t('common.colon') }}</div>
				<div class="info__color__label__wrap">
					<div class="info__color__label__wrap__icon">
						<img
							v-if="getColorImage"
							:src="getColorImage">
					</div>
					<span class="info__color__label__wrap__name">
						{{ getColorName }}
					</span>
				</div>
			</div>

			<p class="info__code">
				{{ $t('share_product.assets_code') + $t('common.colon') + getModelCode }}
			</p>

			<p class="info__price">
				{{ $t('share_product.sell_price') + $t('common.colon') }}<b>￥{{ getPrice }}</b>
			</p>

			<!-- BEGIN: 表单 -->
			<Form
				:model="form"
				:label-width="40"
				class="brand-form"
				inline>
				<FormItem :label="$t('product.brand')">
					<Select
						v-model="form.brand_id"
						@on-change="handleBrandOptionChange">
						<OptionGroup
							v-if="canAddNewBrnad"
							:label="$t('common.create')">
							<Option :value="0">{{ getBrandName }}</Option>
						</OptionGroup>
						<OptionGroup :label="$t('product.existing_brand')">
							<Option
								v-for="item in getCustomerBrands"
								:value="item.id"
								:key="item.id">{{ item.name }}</Option>
						</OptionGroup>
					</Select>
				</FormItem>

				<FormItem
					:label="$t('product.series')"
					class="series">
					<Select v-model="form.brand_series_id">
						<OptionGroup
							v-if="canAddNewSeries"
							:label="$t('common.create')">
							<Option :value="0">{{ getSeriesName }}</Option>
						</OptionGroup>
						<OptionGroup
							v-if="hasSeriesOption"
							:label="$t('product.existing_series')">
							<Option
								v-for="item in customerBrandSeries"
								:value="item.id"
								:key="item.id">{{ item.name }}</Option>
						</OptionGroup>
					</Select>
				</FormItem>

				<Tooltip
					placement="right">
					<div slot="content">
						<p v-html="$t('share_product.add_new_series_tips')"/>
						<p v-html="$t('share_product.add_existing_series_tips')"/>
					</div>
					<Icon
						:size="24"
						color="#2f8def"
						type="help-circled"/>
				</Tooltip>
			</Form>
			<!-- END: 表单 -->

			<div class="info__count-and-btn">
				<p class="info__count">{{ $t('share_product.quote') + $t('common.colon') + getCount }}</p>

				<div class="info__add">
					<poptip
						v-if="isAdded"
						:title="$t('share_product.add_again_tip')"
						transfer
						confirm
						@on-ok="handleOk"
						@on-cancel="handleCancel">
						<div class="detail-btn">{{ $t('share_product.add_to') }}</div>
					</poptip>

					<div
						v-else
						class="detail-btn"
						@click="handleOk">{{ $t('share_product.add_to') }}</div>
				</div>
			</div>
		</div>

	</div>
</template>


<script>
export default {
	name: 'ShareProductMakeupProductDetail',
	props: {
		productDetail: {
			type: Object,
			default() {
				return {}; // this.productDetail.price
			},
		},
		customerBrands: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			form: {
				brand_id: 0,
				brand_series_id: 0,
			},
			brands: [],
			customerBrandSeries: [],
			canMatchSeries: false,
		};
	},
	computed: {
		getImageStyle() {
			return this.productDetail.thumb_url ? { backgroundImage: `url("${this.productDetail.thumb_url}")` } : {};
		},
		getModelCode() {
			return this.productDetail.asset_code || this.$t('common.none');
		},
		getCount() {
			return this.productDetail.ref_count || 0;
		},
		getPrice() {
			return this.productDetail.sell_price ? Number(this.productDetail.sell_price).toFixed(2) : 0.00;
		},
		getTitle() {
			return this.productDetail.title || this.$t('common.unknown');
		},
		getSubtitle() {
			// const material_name = this.productDetail.cosmetic_material_name || this.$t('common.unknown');
			const series_name = this.productDetail.brand_series_name || this.$t('common.unknown');
			return `${series_name}`;
		},
		getColorName() {
			return this.productDetail.name || this.$t('common.unknown');
		},
		getColorImage() {
			return this.productDetail.color_thumb_url || '';
		},
		getId() {
			return this.productDetail.id || '';
		},
		isAdded() {
			const { customer_ref_count } = this.productDetail;

			return !!(customer_ref_count && customer_ref_count > 0);
		},
		getCustomerBrands() {
			return this.customerBrands;
		},
		getBrandName() {
			return this.productDetail.brand_name;
		},
		getSeriesName() {
			return this.productDetail.brand_series_name;
		},
		canAddNewBrnad() { // 客户品牌列表没有当前供应商的品牌时 可以新增
			const brand = this.findBrand(this.getCustomerBrands, this.getBrandName);
			return !brand && this.getBrandName;
		},
		canAddNewSeries() { // 能增加新品且是新增品牌也是新增是 可以新增
			return !this.canMatchSeries && this.getSeriesName;
		},
		hasSeriesOption() {
			return this.form.brand_id !== 0;
		},
	},

	watch: {
		'productDetail.brand_name': function handleBrandChange() {
			this.initFormData();
		},
		'productDetail.brand_series_name': function handleSeriesChange() {
			this.initFormData();
		},

	},
	methods: {
		handleOk() {
			const form = { product_id: this.getId };
			if (this.form.brand_series_id) {
				Object.assign(form, { brand_series_id: this.form.brand_series_id });
			}
			if (this.form.brand_id) {
				Object.assign(form, { brand_id: this.form.brand_id });
			}
			this.$emit('add', form);
		},
		handleCancel() {
			//
		},

		initFormData() {
			const brand = this.findBrand(this.getCustomerBrands, this.productDetail.brand_name);
			if (brand) {
				this.form.brand_id = brand.id; // 存在品牌
				const series = this.findSeries(brand.brand_series, this.productDetail.brand_series_name);
				this.form.brand_series_id = (series && series.id) ? series.id : 0;
			} else {
				this.form.brand_id = 0;
				this.form.brand_series_id = 0;
			}
		},

		/**
		 *  处理品牌选项被选择
		 */
		handleBrandOptionChange(value) {
			if (value === 0) {
				this.form.brand_id = 0;
				this.form.brand_series_id = 0; // 重置系列
			} else {
				const [brand] = this.getCustomerBrands.filter(item => item.id === value);
				if (brand && brand.brand_series) {
					this.customerBrandSeries = brand.brand_series;
					const series = this.findSeries(this.customerBrandSeries, this.getSeriesName);
					if (series && series.id) {
						this.form.brand_series_id = series.id;
						this.canMatchSeries = true;
					} else {
						this.form.brand_series_id = 0;
						this.canMatchSeries = false;
					}
				} else {
					this.customerBrandSeries = [];
					this.form.brand_series_id = 0;
					this.canMatchSeries = false;
				}
			}
		},
		/**
		 * 使用供应商品牌名字查找品牌
		 */
		findBrand(brands, brand_name) {
			const [brand] = brands.filter(item => item.name === brand_name);
			return brand;
		},

		findSeries(series_list, series_name) {
			const [series] = series_list.filter(item => item.name.toLocaleUpperCase() === series_name.toLocaleUpperCase());
			return series;
		},
	},
};
</script>

